<template>
    <div class="father">
        <h3>父组件</h3>
        <div class="content">
            <Game>
                <template v-slot="params">
                    <h5>{{ params.x }}</h5>
                    <ul>
                        <li v-for="y in params.youxi" :key="y.id">
                            {{ y.name }}
                        </li>
                    </ul>
                </template>
            </Game>

            <Game>
                <template v-slot="params">
                    <ol>
                        <li v-for="item in params.youxi" :key="item.id">
                            {{ item.name }}
                        </li>
                    </ol>
                </template>
            </Game>

            <Game>
                <template #default="{ youxi }">
                    <h3 v-for="g in youxi" :key="g.id">{{ g.name }}</h3>
                </template>
            </Game>

        </div>
    </div>
</template>

<script setup lang="ts" name="Father">
import Game from './Game.vue'
// 理解：<span style="color:red">数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。</span>（新闻数据在`News`组件中，但使用数据所遍历出来的结构由`App`组件决定）
</script>

<style scoped>
.father {
    background-color: rgb(165, 164, 164);
    padding: 20px;
    border-radius: 10px;
}

.content {
    display: flex;
    justify-content: space-evenly;
}

img,
video {
    width: 100%;
}</style>
